import React, { Component } from "react";
import { Button, Search } from "@icedesign/base";

export default class PlatformLanding extends Component {
  static displayName = "PlatformLanding";

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }
  handleSearch = () => {
    console.log("ok");
    console.log("ok");
  };
  render() {
    return (
      <div style={styles.wrapper}>
        <div style={styles.body}>
          <h2 style={styles.title}>歌词押韵助手</h2>
          <h3 style={styles.subtitle}>好用的押韵歌词搜索（双押、多押）</h3>
          <div>
<<<<<<< HEAD

            <input type="text" style={styles.input__center_width__input} />

          </div>
          <div>
            <Button style={styles.primaryButton} type="primary">
                搜索歌词
            </Button>
=======
            <div style={styles.input__left_width} />
            <div style={styles.input__center_width}>
              <input type="text" style={styles.input__center_width__input} />
              <Button style={styles.primaryButton} type="primary">
                登录
              </Button>
            </div>
            <div style={styles.input__right_width} />
>>>>>>> 1db83b4e0b6404c80304b58ac89e3079abcadacb
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  input__left_width: {
<<<<<<< HEAD
    float: 'left',
    width: '10%',
    minWidth: '10px',
    height: '1px',
  },
  input__center_width: {
    // float: 'left',
    margin: '0 auto',
    textAlign: 'center',
    width: '80%',
    height: '32px',
    marginTop: '20px',
  },
  input__center_width__input: {
    marginTop: '20px',
    width: '80%',
    maxWidth: '800px',
    minWidth: '100px',
    height: '32px',
    fontSize: '14px',
    lineHeight: '32px',
    color: '#000',
    
  },
  input__right_width: {
    float: 'left',
    width: '10%',
    minWidth: '10px',
    height: '1px',
  },
  search: {
    display: 'inline-block',
    margin: '50px 0px',
    width: '80%',
=======
    float: "left",
    width: "20%",
    height: "1px"
  },
  input__center_width: {
    float: "left",
    width: "60%",
    marginTop: "20px"
  },
  input__center_width__input: {
    float: "left",
    color: "#000000",
    width: "80%",
    height: "40px",
    fontSize: "14px",
    lineHeight: "40px"
  },
  input__right_width: {
    float: "left",
    width: "20%",
    height: "1px"
  },
  search: {
    display: "inline-block",
    margin: "50px 0px",
    width: "80%"
>>>>>>> 1db83b4e0b6404c80304b58ac89e3079abcadacb
  },
  subtitle: {
    lineHeight: "20px",
    margin: "0px",
    color: "#9F9F9F"
  },
<<<<<<< HEAD
  buttons: {
    textAlign: 'center',
    marginTop: 33,
  },
  body: {
    position: 'absolute',
    top: '190px',
    // left: '50%', marginLeft: '-300px',
    width: '100%',
    color: '#fff',
    maxHeight: '260px',
    overflow: 'hidden',
    textAlign: 'center',
=======
  buttons: { textAlign: "center", marginTop: 33 },
  body: {
    position: "absolute",
    top: "100px",
    // left: '50%',
    // marginLeft: '-300px',
    width: "100%",
    color: "#fff",
    height: "600px",
    overflow: "hidden",
    textAlign: "center",
    backgroundImage: `url(${require("./images/bgman.png")})`,
    backgroundPosition: "10% 20%",
    backgroundRepeat: "no-repeat"
>>>>>>> 1db83b4e0b6404c80304b58ac89e3079abcadacb
  },
  wrapper: {
    overflow: "hidden",
    minHeight: "100vh",
    backgroundImage: `url(${require("./images/bgimg.png")}),url(${require("./images/bgbottom.png")})`,
    position: "relative",
    backgroundRepeat: "no-repeat,no-repeat",
    backgroundPosition: "10% 20%,bottom center",
    boxShadow: "0 1px 16px 0 rgba(0,0,0,0.10)"
  },
  title: {
    fontSize: "36px",
    color: "#333",
    letterSpacing: "2px",
    lineHeight: "48px",
    textAlign: "center"
  },
  primaryButton: {
<<<<<<< HEAD
    marginTop: '20px',
    width: 100,
    maxWidth: '200px',
    minWidth: '50px',
    padding: '0 10px',
    lineHeight: '40px',
    color: '#fff',
    borderRadius: 10,
    fontSize: '14px',
    height: '40px',
=======
    width: "20%",
    padding: "0 5px",
    color: "#fff",
    float: "left",
    borderRadius: 0,
    fontSize: "14px",
    borderTopRightRadius: "3px",
    borderBottomRightRadius: "3px",
    height: "40px",
    lineHeight: "40px"
>>>>>>> 1db83b4e0b6404c80304b58ac89e3079abcadacb
  },
  secondaryButton: {
    height: 50,
    fontSize: 16,
    padding: "0 58px",
    lineHeight: "50px",
    marginRight: 20,
    backgroundColor: "transparent",
    borderColor: "#5485f7",
    color: "#5485f7"
  }
};
